import "./index.less"
import { Space, Table, Tag, Input, Button, message, TablePaginationConfig, Popconfirm } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import { SearchOutlined, PlusOutlined } from '@ant-design/icons';
import { getProTypeList,deleteType } from "@/api/product"
import { useEffect, useRef, useState } from "react";
import systme from "@/api/constant"
let searchValue = {
    name: '',
    pageIndex: 1,
    pageSize: 10
}

interface product_type {
    id: string
    name: string
}
let customerId:string;

export default function productType(){
        //查询
        const handlerSearch = (e: any) => {
    
            searchValue.name = e.target.value
        }
        const search = () => {
            initData()
        }
        //初始化
        const [data, setData] = useState<product_type[]>([])
        useEffect(() => {
            initData()
        }, [])
        const initData = (params = searchValue) => {
            setLoading(true)
            getProTypeList(params).then((res) => {
                setData(res.data.list)
                setLoading(false)
            }).catch(error => {
                message.error(systme.ERROR_MESSAGE)
                setLoading(false)
            })
        }
        const [loading, setLoading] = useState(true)
        const PageChange = (page: number, pageSize: number) => {
            searchValue.pageIndex = page
            searchValue.pageSize = pageSize
            setConfig({ ...saveValue.current, pageSize, current: page })
            initData()
        }
    
        let pageConfig: TablePaginationConfig = {
            position: ['bottomCenter'],
            total: 0,
            showTotal: (total: number) => `共 ${total} 条`,
            pageSizeOptions: [10, 20, 30, 40, 50],
            showSizeChanger: true,
            showQuickJumper: true,
            onChange: PageChange,
            pageSize: 10,
            current: 1
    
        }
        let [config, setConfig] = useState((pageConfig))
        let saveValue = useRef<TablePaginationConfig>()
        useEffect(() => {
            //储存数据
            saveValue.current = config
        }, [config])
    
        const columns: ColumnsType<product_type> = [
            {
                title: '产品类型',
                dataIndex: 'realName',
                key: 'realName',
                render: (_, record: product_type) => (
                    <Space size="middle">
                        <div>
                            {record.name}
                        </div>
                    </Space>
                )
            },
            {
                title: '操作',
                key: 'action',
                render: (_, record: product_type) => (
                    <Space size="middle"  key={record.id}>
                        <Popconfirm
                            title="提示"
                            description="是否删除？"
                            onConfirm={confirm}
                            okButtonProps={{ loading: confirmLoading }}
                            onCancel={cancel}
                           
                        >
                            <a style={{ color: 'red' }} onClick={()=>{handlerDelete(record)}}  >删除</a>
                        </Popconfirm>
                    </Space>
                ),
            },
        ];
        const [confirmLoading, setConfirmLoading] = useState(false);
        const handlerDelete = (data:product_type) => {
            customerId = data.id
        }
        const confirm = () => {
            setConfirmLoading(true)
            deleteType({id:customerId}).then((res)=>{
                if(res.code == 200){
                    message.success("删除成功")
                    setConfirmLoading(false)
                    initData()
                }else{
                    message.error(res.msg||"删除失败")
                    setConfirmLoading(false)
                }
            }).catch(() =>{
                message.error(systme.ERROR_MESSAGE)
                setConfirmLoading(false)
            })
        }
        const cancel = () => {
            message.info("取消了删除操作")
            setConfirmLoading(false)
        }


    return (
        <div className="box_views">
            <div className="header flex">
                <div className="header_search flex">
                    <div className="item">
                        <Input placeholder="请输入产品类型" allowClear onChange={(e: unknown) => { handlerSearch(e) }} />
                    </div>
                    <Button type="primary" icon={<SearchOutlined />} size="middle" onClick={search}>查询</Button>
                </div>
            </div>
            <Table columns={columns} dataSource={data} pagination={config} rowKey={item => item.id} loading={loading} />
        </div>
    )
}